import React, { Component } from 'react'
import Ditel from './ditel/Ditel'

import {NavLink,BrowserRouter,Route,Switch, Redirect, Link} from 'react-router-dom'
export default class Message extends Component {
    state={
        message:[
            {id:"01",title:"111"},
            {id:"02",title:"222"},
            {id:"03",title:"333"},
        ]
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.message.map((messageobj)=>{
                            return (
                                <li key={messageobj.id}>
                                    {/* params参数 */}
                                    {/* <Link to={`/home/message/detil/${messageobj.id}/${messageobj.title}`}>{messageobj.title}</Link> */}
                                    {/* search参数 */}
                                    {/* <Link to={`/home/message/detil/?id=${messageobj.id}&title=${messageobj.title}`}>{messageobj.title}</Link> */}
                                    {/* state参数 */}
                                    <Link to={{pathname:'/home/message/detil',state:{id:messageobj.id,title:messageobj.title}}}>{messageobj.title}</Link>
                                </li>
                            )

                        })
                    }
                  </ul>
                  <hr/>
                  {/* 声明接收params参数 */}
                  {/* <Route path='/home/message/detil/:id/:title' component={Ditel}/> */}
                  {/* 声明接收search参数不需要接收 */}
                  {/* <Route path='/home/message/detil' component={Ditel}/> */}
                  {/* 声明接收state参数不需要接收 */}
                  <Route path='/home/message/detil' component={Ditel}/>
            </div>
        )
    }
}
